<template>
	<view class="container">
		<!-- 新增备忘录输入区 -->
		<view class="input-section">
			<textarea class="memo-input" placeholder="输入备忘录内容..." v-model="newMemo" placeholder-style="color: #999">
		</textarea> <!-- 优先级选择 -->
			<view class="priority-section">
				<view class="priority-tabs">
					<view class="priority-tab" :class="{ active: newPriority === 'low' }" @tap="selectPriority('low')">
						<text class="priority-text">低</text>
					</view>
					<view class="priority-tab" :class="{ active: newPriority === 'medium' }"
						@tap="selectPriority('medium')">
						<text class="priority-text">中</text>
					</view>
					<view class="priority-tab" :class="{ active: newPriority === 'high' }"
						@tap="selectPriority('high')">
						<text class="priority-text">高</text>
					</view>
				</view>
			</view>

			<!-- 时间选择 -->
			<view class="time-picker-group">
				<text class="time-label">创建时间:</text>
				<uni-datetime-picker v-model="newDateTime" type="datetime" :clearIcon="false" placeholder="选择日期时间">
				</uni-datetime-picker>
			</view>

			<view class="button-group">
				<button class="btn btn-primary" @tap="addMemo">新增</button>
				<button class="btn btn-secondary" @tap="clearInput">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
import { memoAPI } from '@/utils/api.js';

export default {
	data() {
		return {
			newMemo: '',
			newDateTime: this.getDefaultDateTime(),
			newPriority: 'medium' // 默认中等优先级
		}
	},
	onLoad() {
	},
	onShow() {
		var icon = plus.nativeObj.View.getViewById("icon");
		if (icon) {
			setTimeout(function () {
				icon.show();
			}, 100)
		}
	},

	methods: {
		// 选择优先级
		selectPriority(priority) {
			this.newPriority = priority;
		},

		// 获取默认日期时间
		getDefaultDateTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const date = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			// uni-datetime-picker 格式：YYYY-MM-DD HH:mm:ss
			return `${year}-${month}-${date} ${hours}:${minutes}:00`;
		},

		// 新增备忘录
		async addMemo() {
			if (this.newMemo.trim() === '') {
				uni.showToast({
					title: '内容不能为空',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			if (!this.newDateTime) {
				uni.showToast({
					title: '请选择创建时间',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			try {
				uni.showLoading({ title: '创建中...' });

				const res = await memoAPI.create({
					content: this.newMemo,
					remindTime: this.newDateTime,
					priority: this.newPriority
				});

				uni.hideLoading();

				if (res.code === 200) {
					this.clearInput();

					uni.showToast({
						title: '已添加',
						icon: 'success',
						duration: 1500
					});
				} else {
					uni.showToast({
						title: res.message || '创建失败',
						icon: 'none',
						duration: 2000
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('创建备忘录失败:', error);
				uni.showToast({
					title: '创建失败',
					icon: 'none'
				});
			}
		},

		// 清空输入框
		clearInput() {
			this.newMemo = '';
			this.newDateTime = this.getDefaultDateTime();
			this.newPriority = 'medium'; // 重置为默认中等优先级
		}
	}
}
</script>

<style>
html,
body {
	height: 100%;
	width: 100%;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #f8f9fa;
	box-sizing: border-box;
}

/* 输入区 */
.input-section {
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin: 20rpx 20rpx 0 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
}

.memo-input {
	width: 100%;
	min-height: 600rpx;
	padding: 15rpx;
	border: 1rpx solid #e0e0e0;
	border-radius: 8rpx;
	font-size: 28rpx;
	line-height: 40rpx;
	resize: none;
	background-color: #fafafa;
}

.time-picker-group {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin: 15rpx 0;
	flex-wrap: wrap;
}

/* 优先级选择区域 */
.priority-section {
	margin: 15rpx 0;
}

.priority-label {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.priority-tabs {
	display: flex;
	gap: 12rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 4rpx;
}

.priority-tab {
	flex: 1;
	text-align: center;
	padding: 10rpx 0;
	border-radius: 6rpx;
	transition: all 0.3s ease;
	cursor: pointer;
}

.priority-tab:nth-child(1).active {
	background-color: #34c759;
}

.priority-tab:nth-child(2).active {
	background-color: #ff9500;
}

.priority-tab:nth-child(3).active {
	background-color: #ff3b30;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.priority-text {
	font-size: 26rpx;
	color: #666;
}

.priority-tab.active .priority-text {
	color: #fff;
	font-weight: 500;
}

.time-label {
	font-size: 24rpx;
	color: #666;
	white-space: nowrap;
}

.time-input {
	flex: 1;
	min-width: 150rpx;
	padding: 10rpx 12rpx;
	background-color: #fafafa;
	border: 1rpx solid #e0e0e0;
	border-radius: 6rpx;
	font-size: 26rpx;
	color: #333;
	text-align: center;
}

.button-group {
	display: flex;
	gap: 15rpx;
	margin-top: 15rpx;
}

.btn {
	flex: 1;
	padding: 12rpx 20rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	font-weight: 500;
	border: none;
}

.btn-primary {
	background-color: #007aff;
	color: #fff;
}

.btn-secondary {
	background-color: #f0f0f0;
	color: #666;
}
</style>
